<template>
    <div class="content">
        <div class="top">

  
          <div class="block">
  <span class="demonstration">单选可搜索</span>
  <el-cascader
    placeholder="试试搜索：斗破苍穹"
    v-model="value"
    :options="options"
    filterable></el-cascader>
</div>

<div class="upload" v-show="value !=0">
<el-upload
  class="upload-demo"
  drag
  :on-change="success"
  :auto-upload="false"
  :show-file-list="false"
  action="/"

  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</div>





  <el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  
  <template>
    <div>
      <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>
<el-button class="btn"  @click="additem" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<ul  ref="onloadul"  class="infinite-list" v-infinite-scroll="load" style="overflow:auto  ; height: 300px;">

  <li class="infinite-list-item">
      小说主表
      <div style="">
       <span  v-show="novelstate ==1" >  <i class="el-icon-loading"></i></span>
       <span   v-show="novelstate ==2">  <i class="el-icon-check"></i></span>
       <span   v-show="novelstate ==-1">  <i class="el-icon-close"></i></span>
      </div>
  </li>

    <li v-for="i in tableData" class="infinite-list-item">{{ i.articleTitle }}    

      <div style="">
        <span v-show="i.state ==0"> pending... </span>
       <span v-show="i.state ==1" >  <i class="el-icon-loading"></i></span>
       <span v-show="i.state ==2" >  <i class="el-icon-check"></i></span>
       <span v-show="i.state ==3" >  <i class="el-icon-close"></i></span>
      </div>

   
      

      
      
      </li>
  </ul>




    </div>
  </template>



  <span slot="footer" class="dialog-footer">
    <el-button @click="onload1">取 消</el-button>
    <el-button type="primary" @click="onload1">确 定</el-button>
  </span>
</el-dialog>



  <div style="text-align: center;">

  <el-button  v-show="uploadstatus"   type="primary"  @click="toloader">下一步</el-button>
</div>
    </div>
</template>
<script>
import { onloadingnovel ,addnovelitem  ,getclasspid  ,getnovelandpart} from '@/api/novel'
let id = 0;
    export default {
        data() {
      return {
        fullscreenLoading2:false,
        options2: [],
        value2: '',
        value:0,


        options:[
          
        ],

        centerDialogVisible:false,
        active:0,
        id:0,
        form: {
          name: '',
          isHot:false,
          isNew:true,
          Price:5,
          bookReview:"",
          brief:"",
          selectvalue:"",
          author:"",
          picUrl:""
        },
        novelstate:0,
        tableData: [
          
        ]   ,
        
      }
    },
    created() {
       this.selcetevent()
    },
   computed:{
    uploadstatus(){
        return this.value!=0  && this.tableData.length>0
      }
   },
    methods: {
      onload1(){
        location.reload()
      },
      load(value){
        console.log("触发了 文件上传");
        this.fullscreenLoading2 = true
        console.dir(value.target.files[0]);  
          if(value.target.files[0].size  >  1024000){
            const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '图标太大了 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
        this.fullscreenLoading2 = false 
        return
          }
       var reader = new FileReader()

       reader.onload = ()=>{
        console.log("触发了读取文件" , reader.result );

        this.form.picUrl =  reader.result 
        console.log('this.form.picUrl',this.form.picUrl);
        // this.fullscreenLoading2 = false
     
    
       }
       reader.readAsDataURL(value.target.files[0])

    
      },
      upload(){
        this.$nextTick(()=>{
          console.log(this.$refs.files1.click());
  })
      },
     async additem(){
//  获取节点 
     var  height =  this.$refs.onloadul.children[0].offsetHeight
      console.log( this.$refs.onloadul.scrollTop   );

        console.log("开始上传小说章节");
        this.active= 2
        // this.tableData
        // console.log(" 章节" , this.tableData);
        for(let i = 0 ; i <this.tableData.length; i++){
          //  让数据一条一条发送 插入后再继续查询 避免 数据库数据丢失
          
          this.tableData[i].state= 1
          this.tableData[i].status= true
          this.tableData[i].Pid = this.value[0]
              let result =     await   addnovelitem(  { item :  this.tableData[i] } )
              result.code == 20000 ?  this.tableData[i].state= 2 :   this.tableData[i].state= -1
              this.$refs.onloadul.scrollTop =     (i+1) *height
        }
        this.active = 3
        location.reload()

      },

      async toloader(){
          // console.log(this.form);
          this.centerDialogVisible = true 
        //   //  让小说开始上传
        //   console.log("开始上传小说");
        //   this.novelstate = 1

        // let  result  =   await onloadingnovel(this.form)
        //   if(result.code ==20000){
        //     this.novelstate = 2
        //     this.active = 1 
        //     this.id = result.data.identifiers[0].id
        //   }else{
        //     this.novelstate = -1
        //   }

      },
      onSubmit() {
        console.log('submit!');
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      success(file){
        console.log(file.raw);
        // file.raw 二进制的文件
        const reader = new FileReader()
        //  base64
        reader.onload = ()=>{
             
             let txt  =   reader.result
            //   文章内容
            //  书名
            let dataarr = file.name.split("  ")
            if(dataarr.length !=2){
               dataarr = file.name.split("　")
            }
           
        
            dataarr[1] =  dataarr[1].trim().replace('.txt','')

          //   下标0 为顺序  下标1为 文章名
          if( dataarr[0] == '0a'){
              this.form.bookReview = txt
          }else if(dataarr[0] == '0b'){
            this.form.brief = txt
          }else{
            this.tableData.push( {  
              sort: dataarr[0],
              articleTitle:dataarr[1] ,
              Views: '0',
              status: 'true',
              articleContent:txt
              ,
              state:0
             })
          }


            
        }
        reader.readAsText(file.raw)

      
    },
      creatMitul(arr){
        var crr ={}
        console.log(arr);
           arr.forEach(  v=>{ 
            if(v.pid != null){
              crr[v.id] = { 
                value:v.id , 
                label:v.name , 
               pid:v.pid   }
            }else{
              crr[v.id] = { 
                value:v.id , 
                label:v.name , 
                children:[]  ,pid:v.pid   }
            }
           } )
           arr.forEach(v =>{ 
              if(v.pid !=null){
                  // 说明是子
                  crr[v.pid].children.push(  crr[v.id]   )

              }
           } )


           console.log( "crr", Object.values(crr));
           return Object.values(crr).filter( v =>  v.pid ==null )

      },
   async selcetevent(){

      this.fullscreenLoading =true 
      
      //  let   { data }    =   await getclasspid()
       let   { data }    =   await getnovelandpart({
            page:1,
            size:1000000
       })
       console.log("万能查询所有小说",data);
      // this.options =    data.result.filter(  v =>  v.pid == null ).map( v =>  {
      //     return { value:v.id , label:v.name , children :   data.result.filter( e =>   )   }
      //   }
      //    )
      //   console.log(  "待添加文章",this.creatMitul(    data.result));
      // this.options = this.creatMitul(    data.result) 
      this.options = data.list.map( v =>{
              v.label=v.name
              v.value= v.id
              return v
          } )
       this.fullscreenLoading =false
 
    
    }

    },
    directives:{  
       'abc':{  
        inserted(){
          console.log("指令");
        }
       }
    }
  }
</script>

<style lang="scss" scoped>
.file{
  display: none;
}
.content{
    padding:10PX 30px;
}
.top{ 
    display: flex;
    justify-content: space-between;


}
.upload{
    flex-grow: 2;
    text-align: center;
     
}
.novel{
    flex-grow: 3;
}
.content{ 
 
  li{ 
    list-style: none;
    display: flex;
    justify-content: space-between;
    width: 300px;

  }
  .el-icon-loading, .el-icon-check{
    color: #006dff;
  }
  .el-icon-close{
    color: red;
  }
  .btn{ 
    width: 60px;
    height: 30px;
    padding: 0;
  }
}

.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }



</style>